<!DOCTYPE html>
<html>
    <head>
        <title>{% block title %}{{ global.title }}{% endblock %}</title>
        <meta charset="UTF-8">
        <meta name="format-detection" content="telephone=no">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        {{ css('font/fang.css') }}
        {{ css('font/fang2.css') }}
        <style>
            * { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust:none }
            html, h1, h2, h3, h4 { margin:0; padding:0; }
            ul, ol { margin-left:0; list-style: none; text-align:left; }
            a { text-decoration:none; color:black; border:none; outline: none; }
            img { border:none; }
            form, table { margin:0px; padding:0; }
            body, #body { margin: 0 auto; max-width: 480px; min-height: 400px; box-sizing: border-box; background-color: white; background-color: #183843; }
            body, h1, h2, h3, h4, a { font-family: 'MHeiPRC-Bold', '微软雅黑', 'Microsoft YaHei'; }

            .clearfix:before, .clearfix:after {content: " ";display: table; clear: both; }
            .float-l { float: left; }
            .float-r { float: right; }
            .hpimg { display: block; width: 100%; }
            .unselectable {
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                -o-user-select: none;
                user-select: none;
            }
            input, button { -webkit-appearance: none; background: none; padding: 0; outline-style:none; border: none; }
            #body, .loading { position: relative; width: 100%; height: 100%; overflow-x: hidden; }
            .page { position: relative; width: 100%; height: 100%; color: #fff; }
            .overlay, .popup { 
                display: none;
                background-color: rgba(0, 0, 0, 0.8);
                position: absolute; top: 0; left: 0;
                width: 100%; height: 100%;
                z-index: 98;
            }
            .overlay { z-index: 99; }
            .fang { font-family: "fang"; }
            .fang2 { font-family: "fang2"; }
            .btn-bgm { position: absolute; z-index: 100; top: 10px; right: 10px;  }
            .btn-bgm img { width: 22px; }
            .btn-bgm .state1 { display: none; }
            .btn-bgm .state2 { display: block; }
            .btn-bgm.play .state1 { display: block; }
            .btn-bgm.play .state2 { display: none; }
            
        </style>
        {% block stylesheets %}{% endblock %}
        <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "//hm.baidu.com/hm.js?3372e2f235b6dfbdfbd8a6ad0d02b678";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
        </script>
    </head>
    <body>
        <div id='body'>
            {% block body %}
            {% endblock %}
        </div>
        <div id='bgm' class="music" data-src="{{ imgsrc("audio/bgm.mp3") }}"></div>
        <a class="btn-bgm play" href="#">
            <img class="state1" src="{{ imgsrc('images/open.png?v=1')}}"/>
            <img class="state2" src="{{ imgsrc('images/off.png?v=1')}}"/>
        </a>
        {{ js('js/jquery-1.9.1.min.js') }}
        {{ js('js/TweenMax.min.js') }}
        {{ js('js/lodash.min.js') }}
        {{ js('js/imagesloaded.pkgd.min.js') }}
        {{ js('js/audioplayer.js?v=1') }}
        <script src='https://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script>
        <script>                        
            var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
            var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
            $('#body').height(h);            
             $('.overlay').click(function (e) {
                e.preventDefault();
                $(this).hide();
            });
            var bgm = new Player($('#bgm'), true);
            //bgm._audio.play();
                        
            $('a.btn-bgm').click(function(e){
                e.preventDefault();
                if($(this).hasClass('play')) {
                    bgm._audio.pause();
                    $(this).removeClass('play');
                } else {
                    bgm._audio.play();
                    $(this).addClass('play');
                }
                
            });
            var lineLink = '{{ global.wxshare.link }}/friend/{{ app.user.uuid }}?uuid={{ app.user.uuid }}';
            var imgUrl = '{{ global.wxshare.img }}';
            var shareTitle = '{{ global.wxshare.title }}';
            var shareContent = '玩秘密花园吃货版，10元优惠券轻松到手，你行你试试？';
            var timelineContent = '{{ global.wxshare.content }}';
        </script>
        
        {% if signPackage is defined %}
        <script>
            wx.config({
                debug: false,
                appId: '{{ signPackage.appId }}',
                timestamp: {{ signPackage.timestamp }},
                nonceStr: '{{ signPackage.nonceStr }}',
                signature: '{{ signPackage.signature }}',
                jsApiList: [
                    'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'showMenuItems', 'hideMenuItems'
                ]
            });
            wx.ready(function () {
                wx.showMenuItems({
                    menuList: [
                        'menuItem:share:appMessage',
                        'menuItem:share:timeline',
                        'menuItem:share:weiboApp',
                        'menuItem:share:qq'
                    ]
                });
                wx.hideMenuItems({
                    menuList: [
                        'menuItem:share:facebook',
                        'menuItem:openWithSafari',
                        'menuItem:share:email',
                        'menuItem:setFont',
                        'menuItem:copyUrl',
                        'menuItem:exposeArticle'
                    ]
                });
                
                wx.onMenuShareAppMessage({
                    title: shareTitle,
                    desc: shareContent,
                    link: lineLink,
                    imgUrl: imgUrl,
                    success: function () { 
                        _hmt.push(['_trackEvent','微信分享', '好友']);
                    },
                    cancel: function () { 
                        // 用户取消分享后执行的回调函数
                    }
                });
                wx.onMenuShareTimeline({
                    title: timelineContent, // 分享标题
                    link: lineLink, // 分享链接
                    imgUrl: imgUrl, // 分享图标
                    success: function () { 
                        _hmt.push(['_trackEvent','微信分享', '朋友圈']);
                    },
                    cancel: function () { 
                        // 用户取消分享后执行的回调函数
                    }
                });
                wx.onMenuShareQQ({
                    title: shareTitle,
                    desc: shareContent,
                    link: lineLink,
                    imgUrl: imgUrl,
                    success: function () { 
                    },
                    cancel: function () { 
                        // 用户取消分享后执行的回调函数
                    }
                });
                wx.onMenuShareWeibo({
                    title: shareTitle,
                    desc: shareContent,
                    link: lineLink,
                    imgUrl: imgUrl,
                    success: function () { 
                    },
                    cancel: function () { 
                        // 用户取消分享后执行的回调函数
                    }
                });
            });
            {% endif %}
        </script>
        {% block javascripts %}
        {% endblock %}
    </body>
</html>
